<template>
	<view class="page-container bg">
		<view class="filter W1">
			<view class="item" @click="pickerShowXq1=true">
				<!-- 一级销区 -->
				{{
					query.rp02
					?xq1List[pickerShowXq1_def[0]].RP02NAME
					:'一级销区'
				}}
				<view class="sicon sicon-top"></view>
			</view>
			<view class="item" @click="pickerShowXq2Fn">
				<!-- 二级销区 -->
				{{
					query.rp03
					?xq2List[pickerShowXq2_def[0]].RP03NAME
					:'二级销区'
				}}
				<view class="sicon sicon-top"></view>
			</view>
			<view class="item" @click="pickerHideBrandFn">
				<!-- 品牌部 -->
				{{
					query.rp05
					?brandList[pickerShowBrand_def[0]].BRAND_NAME
					:'品牌部'
				}}
				<view class="sicon sicon-top"></view>
			</view>
			<view class="item" @click="pickerShow=true">
				<!-- 拿货来源 -->
				{{query.siteFrom||'拿货来源'}}
				<view class="sicon sicon-top"></view>
			</view>
		</view>
		
		<!-- 一级销区 -->
		<u-picker
			v-model="pickerShowXq1"
			mode="selector"
			:default-selector="pickerShowXq1_def"
			:range="xq1List"
			range-key="RP02NAME"
			@confirm="pickerConfirmXq1"
			@cancel="pickerHideXq1"
		></u-picker>
		<!-- 二级销区 -->
		<u-picker
			v-model="pickerShowXq2"
			mode="selector"
			:default-selector="pickerShowXq2_def"
			:range="xq2List"
			range-key="RP03NAME"
			@confirm="pickerConfirmXq2"
			@cancel="pickerHideXq2"
		></u-picker>
		<!-- 品牌 -->
		<u-picker
			v-model="pickerShowBrand"
			mode="selector"
			:default-selector="pickerShowBrand_def"
			:range="brandList"
			range-key="BRAND_NAME"
			@confirm="pickerConfirmBrand"
			@cancel="pickerHideBrand"
		></u-picker>
		
		<!-- 拿货来源 -->
		<u-picker
			v-model="pickerShow"
			ref="uPicker"
			mode="selector"
			:default-selector="[0]"
			:range="goodsSourceArr"
			range-key="name"
			@confirm="pickerConfirm"
			@columnchange="pickerChangeHandler"
			@cancel="pickerHide"
		></u-picker>
		
		<!-- <u-picker mode="selector" v-model="show"  :default-selector="[0]" :range="selectorObj" range-key="cateName"></u-picker> -->
		
		<view class="noInfo" v-if="list.length<1">
			暂无内容
		</view>
		<view class="card W1" v-for="item in list" @click="goDetail(item)">
			<view class="tipIcon" :class="getTipIconColor(item.siteStatus)">{{getStoreStatusStr(item.siteStatus)}}</view>
			<view class="titBox">【{{item.rp03name}}-{{item.rp05name}}】{{item.siteAddName}}{{item.siteScName}}{{item.siteTwName}}</view>
			<view class="summary">
				负责人：{{item.siteMemName}}
				<br />
				拿货来源：{{item.siteFrom}}
				<br />
				创建人：{{item.siteCreateName}}
				<br />
				创建时间：{{item.createTime.substr(0,10)}}
				<br />
			</view>
		</view>
	</view>
</template>

<script>
import CONFIG from '../../common/config.js'
import utils from '../../common/utils.js'
import { getSystemDictData } from '../../common/service.js'
import { list, siteFrom , getXQ1ByMemCode,getXQ2ByMemCodeAndXQ1,getBrandByMemCodeAndXQ2 } from '../../common/api/shopManger.js'
export default {
	name: 'shopMangerList',
	data() {
		return {
			opt:{},
			hasMore:true,
			query: {
				memCode: '',
				memcode: '',
				pageNum:1,
				pageSize:10,
				isDelStatus:0, //isDelStatus 是否撤销列表，正常列表传0，撤销列表传1
				rp02:'', // 一级销区
				rp03:'', // 二级销区
				rp05:'', // 品牌
				siteFrom:'', // 拿货来源
			},
			pickerShow: false,
			pickerTimer: '',
			defaultIndex: [0],
			list: [],
			memCode: CONFIG.user.id,
			columns: [[], []],
			storeStatus:{},
			storeSptype:{},
			goodsSourceIndex:0,
			goodsSourceArr:[],
			pickerShowXq1: false,
			xq1List:[],
			pickerShowXq2: false,
			xq2List:[],
			pickerShowBrand: false,
			brandList:[],
			pickerShowXq1_def:[0],
			pickerShowXq2_def:[0],
			pickerShowBrand_def:[0],
		}
	},
	onLoad(e) {
		console.log(e, '=====')
		this.opt = e
		
		// 微网点状态
		// HN_OFFLINE_SITE_STATUS
		this.getSystemDict('HN_OFFLINE_SITE_STATUS', res=>{
			res.data.data.forEach(item=>{
				if(item.dictValue=='SITE_STATUS_SPING'){//审批中
					item.localBgColor = 'bg1'
				}else if(item.dictValue=='SITE_STATUS_SPEND'){//正常营业
					item.localBgColor = 'bg2'
				}else if(item.dictValue=='SITE_STATUS_DELING'){//撤销中
					item.localBgColor = 'bg3'
				}else if(item.dictValue=='SITE_STATUS_DELEND'){//已撤销
					item.localBgColor = 'bg4'
				}else if(item.dictValue=='SITE_STATUS_NEW'){//新建
					item.localBgColor = 'bg5'
				}
				this.storeStatus[item.dictValue] = item
			})
			// for(let i of res.data.data){
			// 	i.isActived = false
			// }
			// this.storeStatus = [{
			// 		// LOOKUP_CODE: "",
			// 		// LOOKUP_NAME: "不限",
			// 		dictCode: "",
			//		dictValue:"",
			// 		dictLabel: "不限",
			// 		isActived: true
			// 	}].concat(res.data.data)
			this.getList()
		})
		
		// // 微网点审批类型
		// // HN_OFFLINE_SITE_SPTYPE
		// this.getSystemDict('HN_OFFLINE_SITE_SPTYPE', res=>{
		// 	res.data.data.forEach(item=>{
		// 		this.storeSptype[item.dictValue] = item
		// 	})
		// })
		
		this.goodsSourceArr = [{name:'全部'}, ...siteFrom()]
		// this.goodsSourceArr = siteFrom()
		
	},
	created(e) {
		this.LOGINACTION()

		this.query.memCode = this.memCode
		this.query.memcode = this.memCode
		
		
		this.toGetXQ1ByMemCode()
	},
	mounted() {},
	onReachBottom(e) {
		console.log(e, '=====')
		this.getList()
	},
	methods: {
		// 查一级销区
		toGetXQ1ByMemCode() {
			uni.showLoading({ title: '加载中...' })
			getXQ1ByMemCode({memCode:this.memCode,memcode:this.memCode}, res => {
				if(!this.checkStatus00000(res)) return
				uni.hideLoading()
				this.xq1List = [{RP02NAME: "全部", RP02: ""}, ...res.data.data]
			})
		},
		// 查二级销区
		toGetXQ2ByMemCodeAndXQ1(xq1code) {
			uni.showLoading({ title: '加载中...' })
			getXQ2ByMemCodeAndXQ1({xq1code:xq1code,memCode:this.memCode,memcode:this.memCode}, res => {
				if(!this.checkStatus00000(res)) return
				uni.hideLoading()
				this.xq2List = [{RP03NAME: "全部", RP03: ""}, ...res.data.data]
			})
		},
		// 查品牌
		toGetBrandByMemCodeAndXQ2(xq2Code) {
			uni.showLoading({ title: '加载中...' })
			getBrandByMemCodeAndXQ2({xq2Code:xq2Code,memCode:this.memCode,memcode:this.memCode}, res => {
				if(!this.checkStatus00000(res)) return
				uni.hideLoading()
				this.brandList = [{BRAND_NAME: "全部", BRAND_CODE: ""}, ...res.data.data]
			})
		},
		getSystemDict(type, call) {
			getSystemDictData(type, (resuser) => {
				if (resuser && resuser.statusCode == 200) {
					const rs = resuser.data;
					if (rs.code == 200) {
						if (call) {
							call(resuser)
						}
					}
				}
			}, (e) => {
				console.log('获取数据字典'+type+'-主题类型枚举列表失败:',e);
			});
		},
		getTipIconColor (dictValue){
			return this.storeStatus[dictValue].localBgColor
		},
		getStoreStatusStr(dictValue){
			return this.storeStatus[dictValue].dictLabel
		},
		resetXq1(){
			this.xq1List = []
			this.pickerShowXq1_def=[0]
			this.query.rp02='' // 一级销区
		},
		resetXq2(){
			this.xq2List = [] //重置二级销区
			this.pickerShowXq2_def=[0]
			this.query.rp03='' // 二级销区
			
		},
		resetBrandList(){
			this.brandList = [] //重置品牌
			this.pickerShowBrand_def=[0]
			this.query.rp05='' // 品牌
		},
		// 一级销区 选择
		pickerHideXq1() {
			this.pickerShowXq1 = false
		},
		pickerConfirmXq1(e) {
			this.pickerShowXq1_def = [e[0]]
			let code = this.xq1List[e[0]].RP02
			this.resetXq2()
			this.resetBrandList()
			if(code){
				this.toGetXQ2ByMemCodeAndXQ1(code)
			}
			this.query.rp02 = code
			this.setTimeoutSearch()
			this.pickerHideXq1()
		},
		// 二级销区 打开
		pickerShowXq2Fn(){
			if (this.xq2List.length==0) {
				uni.showToast({
					title: '请先选择一级销区',
					duration: 2000,
					icon: 'error'
				})
			} else {
				this.pickerShowXq2 = true
			}
		},
		// 二级销区 选择
		pickerHideXq2() {
			this.pickerShowXq2 = false
		},
		pickerConfirmXq2(e) {
			this.pickerShowXq2_def = [e[0]]
			let code = this.xq2List[e[0]].RP03
			this.resetBrandList()
			if(code){
				this.toGetBrandByMemCodeAndXQ2(code)
			}
			this.query.rp03 = code
			this.setTimeoutSearch()
			this.pickerHideXq2()
		},
		// 品牌 打开
		pickerHideBrandFn(){
			if (this.brandList.length==0) {
				uni.showToast({
					title: '请先选择二级销区',
					duration: 2000,
					icon: 'error'
				})
			} else {
				this.pickerShowBrand = true
			}
		},
		// 品牌 选择
		pickerHideBrand() {
			this.pickerShowBrand = false
		},
		pickerConfirmBrand(e) {
			this.pickerShowBrand_def = [e[0]]
			let code = this.brandList[e[0]].BRAND_CODE
			this.query.rp05 = code
			this.setTimeoutSearch()
			this.pickerHideBrand()
		},
		pickerHide() {
			this.pickerShow = false
		},
		pickerConfirm(e) {
			this.goodsSourceIndex = e
			let name = this.goodsSourceArr[e].name
			if(name=='全部'){ name = '' }
			this.query.siteFrom = name
			this.setTimeoutSearch()
			this.pickerHide()
		},
		pickerChangeHandler(e) {
			// 多列 才有效
			console.log(e, '=====')
		},
		setTimeoutSearch() {
			setTimeout(()=>{
				this.search()
			},300)
		},
		search() {
			this.query.pageNum=1
			this.hasMore=true
			this.getList()
		},
		clearSearch() {
			this.query.value = ''
		},
		checkCode200(res) {
			if (res.data.code == 200) {
				return true
			} else {
				uni.showToast({
					title: res.data.msg,
					duration: 2000,
					icon: 'error'
				})
				return false
			}
		},
		checkStatus00000(res) {
			if (res.data.status == '00000') {
				return true
			} else {
				uni.showToast({
					title: res.data.message||'请求错误',
					duration: 2000,
					icon: 'error'
				})
				return false
			}
		},
		// 选择店面列表接口
		getList() {
			if(!this.hasMore) return
			uni.showLoading({ title: '加载中...' })
			if(this.opt.isDelStatus == 1){
				this.query.isDelStatus = 1
			}
			list(this.query, res => {
				if(!this.checkCode200(res)) return
				uni.hideLoading()
				
				if(this.query.pageNum==1){
					this.list = res.data.rows
				}else{
					this.list = this.list.concat(...res.data.rows)
				}
				if(this.list.length >= res.data.total){
					this.hasMore = false
				}
				this.query.pageNum += 1
				
			})
		},
		goDetail(row) {
			uni.navigateTo({
				url: './detail?id='+row.id
			})
			// if (row == 'null' || row == undefined) {
			// 	// 新增
			// 	uni.navigateTo({
			// 		url: './detail?rowFormat=0&row'
			// 	})
			// } else {
			// 	// 修改 列表传json字符串
			// 	uni.navigateTo({
			// 		url: './detail?rowFormat=1&row=' + JSON.stringify(row),
			// 		events: {
			// 			// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
			// 			isReload: data => {
			// 				// console.log(data)
			// 				this.search()
			// 			}
			// 		}
			// 	})
			// }
		}
	}
}
</script>

<style lang="scss" scoped>
uni-page-body{height:100%;}
.bg {
	background: #f6f6f6;
}
.page-container {
	padding-top: 25rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
	position: relative;

	height: 100%;
	box-sizing: border-box;
	overflow-y: scroll;
	
	.noInfo{
		padding:20rpx;
		text-align: center;
	}
	
	.W1 {
		margin: 0 27rpx 21rpx;
	}
	.filter {
		display: flex;
		justify-content: space-between;

		.item {
			background-color: #fff;
			// width: 154rpx;
			min-height: 62rpx;
			padding: 8rpx 0;
			line-height: 1.2;
			border-radius: 4rpx;

			text-align: center;
			font-size: 26rpx;
			font-weight: 400;
			color: #666666;

			display: flex;
			justify-content: center;
			align-items: center;

			flex: 1;
			margin-right: 26rpx;
			&:last-child {
				margin-right: 0;
			}
		}

		.sicon {
			margin-left: 4rpx;
			width: 0;
			height: 0;
			border: 3px solid #0000;
			display: inline-block;
			vertical-align: middle;
		}
		.sicon-top {
			margin-top: 6rpx;
			border-top-color: #a4a4a4;
		}
	}

	.card {
		border-radius: 10rpx;
		background-color: #fff;
		margin-bottom: 27rpx;
		overflow: hidden;
		padding: 30rpx 30rpx 16rpx;
		position: relative;

		&.cardW1 {
			margin: 20rpx 0 0;
			padding-bottom: 20rpx;
			border-radius: 30rpx 30rpx 0px 0px;
		}

		.tipIcon {
			width: 127rpx;
			line-height: 42rpx;
			border-radius: 0px 10rpx 0px 20rpx;
			position: absolute;
			top: 0;
			right: 0;

			font-size: 26rpx;
			color: #ffffff;
			text-align: center;

			&.bg1 {
				background: #ff9940;
			}
			&.bg2 {
				background: #00c682;
			}
			&.bg3 {
				background: #8D93FF;
			}
			&.bg4 {
				background: #c6c6c6;
			}
			&.bg5 {
				background: #007AFF;
			}
		}

		.titBox {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			border-bottom: 2rpx solid #e1e1e1;
			padding-top: 16rpx;
			padding-bottom: 16rpx;
			margin-bottom: 10rpx;
			line-height: 1.5;
		}

		.summary {
			padding: 0 0rpx 2rpx;
			font-size: 26rpx;
			line-height: 48rpx;
		}
	}
}
</style>
